<template>
	<view class="health-report">
	
		<!-- 报告类型选择器 -->
		<view class="report-selector">
			<view class="selector-container">
				<view class="selector-tabs">
					<view 
						class="tab-item" 
						:class="{ active: currentReportType === 'week' }"
						@tap="switchReportType('week')"
					>
						<text class="tab-text">周报</text>
					</view>
					<view 
						class="tab-item" 
						:class="{ active: currentReportType === 'month' }"
						@tap="switchReportType('month')"
					>
						<text class="tab-text">月报</text>
					</view>
					<view 
						class="tab-item" 
						:class="{ active: currentReportType === 'year' }"
						@tap="switchReportType('year')"
					>
						<text class="tab-text">年报</text>
					</view>
				</view>
				<view class="date-range" @tap="selectDateRange">
					<text class="date-text">{{ dateRangeText }}</text>
					<text class="arrow-down">▼</text>
				</view>
			</view>
		</view>

		<!-- 数据分析 -->
		<view class="data-analysis">
			<text class="analysis-title">数据分析</text>

			<!-- 血糖分析 -->
			<view class="health-section">
				<view class="section-header">
					<text class="section-title">血糖</text>
					<text class="view-abnormal" @tap="viewAbnormal('bloodSugar')">查看异常 ></text>
				</view>
				
				<view class="chart-container">
					<view class="donut-chart">
						<view class="chart-center">
							<text class="total-count">{{ bloodSugarData.count }}次</text>
							<text class="total-label">总次数</text>
						</view>
					</view>
					<view class="chart-legend">
						<view class="legend-item">
							<view class="legend-color normal"></view>
							<text class="legend-text">正常: {{ bloodSugarData.normal }}次 </text>
						</view>
						<view class="legend-item">
							<view class="legend-color high"></view>
							<text class="legend-text">高血糖: {{ bloodSugarData.high }}次 </text>
						</view>
						<view class="legend-item">
							<view class="legend-color low"></view>
							<text class="legend-text">低血糖: {{ bloodSugarData.low }}次 </text>
						</view>
					</view>
				</view>

				<view class="average-value">
					<text class="avg-label">平均值: {{ formatValue(bloodSugarData.avgValue) }}mmol/L</text>
				</view>

				<view class="bar-charts">
					<view class="bar-chart">
						<text class="chart-title">mmol/L</text>
						<view class="bars">
							<view class="bar-item">
								<view class="bar max-value" :style="{ height: getBarHeight(bloodSugarData.maxValue, 15) + 'rpx' }"></view>
								<text class="bar-label">最高值</text>
								<text class="bar-value">{{ formatValue(bloodSugarData.maxValue) }}</text>
							</view>
							<view class="bar-item">
								<view class="bar min-value" :style="{ height: getBarHeight(bloodSugarData.minValue, 15) + 'rpx' }"></view>
								<text class="bar-label">最低值</text>
								<text class="bar-value">{{ formatValue(bloodSugarData.minValue) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 血压分析 -->
			<view class="health-section">
				<view class="section-header">
					<text class="section-title">血压</text>
					<text class="view-abnormal" @tap="viewAbnormal('bloodPressure')">查看异常 ></text>
				</view>
				
				<view class="chart-container">
					<view class="donut-chart">
						<view class="chart-center">
							<text class="total-count">{{ bloodPressureData.count }}次</text>
							<text class="total-label">总次数</text>
						</view>
					</view>
					<view class="chart-legend">
						<view class="legend-item">
							<view class="legend-color normal"></view>
							<text class="legend-text">正常: {{ bloodPressureData.normal }}次 </text>
						</view>
						<view class="legend-item">
							<view class="legend-color high"></view>
							<text class="legend-text">高血压前期: {{ bloodPressureData.high }}次</text>
						</view>
						<view class="legend-item">
							<view class="legend-color high1"></view>
							<text class="legend-text">一级高血压: {{ bloodPressureData.high1 }}次</text>
						</view>
						<view class="legend-item">
							<view class="legend-color high2"></view>
							<text class="legend-text">二级高血压: {{ bloodPressureData.high2 }}次</text>
						</view>
						<view class="legend-item">
							<view class="legend-color high3"></view>
							<text class="legend-text">三级高血压: {{ bloodPressureData.high3 }}次</text>
						</view>
						<view class="legend-item">
							<view class="legend-color low"></view>
							<text class="legend-text">低血压: {{ bloodPressureData.low }}次 </text>
						</view>
					</view>
				</view>

				<view class="average-value">
					<text class="avg-label">平均值: {{ formatValue(bloodPressureData.avgSystolicValue) }}/{{ formatValue(bloodPressureData.avgDiastolicValue) }}mmHG</text>
				</view>

				<view class="bar-charts">
					<view class="bar-chart">
						<text class="chart-title">mmHg</text>
						<view class="bars">
							<view class="bar-item">
								<view class="bar max-value" :style="{ height: getBarHeight(parseInt(bloodPressureData.maxSystolicValue), 200) + 'rpx' }"></view>
								<text class="bar-label">最高值</text>
								<text class="bar-value">{{ formatValue(bloodPressureData.maxSystolicValue) }}/{{ formatValue(bloodPressureData.maxDiastolicValue) }}</text>
							</view>
							<view class="bar-item">
								<view class="bar min-value" :style="{ height: getBarHeight(parseInt(bloodPressureData.minDiastolicValue), 200) + 'rpx' }"></view>
								<text class="bar-label">最低值</text>
								<text class="bar-value">{{ formatValue(bloodPressureData.minSystolicValue) }}/{{ formatValue(bloodPressureData.minDiastolicValue) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 尿酸分析 -->
			<view class="health-section">
				<view class="section-header">
					<text class="section-title">尿酸</text>
					<text class="view-abnormal" @tap="viewAbnormal('uricAcid')">查看异常 ></text>
				</view>
				
				<view class="chart-container">
					<view class="donut-chart">
						<view class="chart-center">
							<text class="total-count">{{ uricAcidData.count }}次</text>
							<text class="total-label">总次数</text>
						</view>
					</view>
					<view class="chart-legend">
						<view class="legend-item">
							<view class="legend-color normal"></view>
							<text class="legend-text">正常: {{ uricAcidData.normal }}次</text>
						</view>
						<view class="legend-item">
							<view class="legend-color high"></view>
							<text class="legend-text">高尿酸: {{ uricAcidData.high }}次 </text>
						</view>
						<!-- <view class="legend-item">
							<view class="legend-color low"></view>
							<text class="legend-text">低尿酸: {{ uricAcidData.low }}次</text>
						</view> -->
					</view>
				</view>

				<view class="average-value">
					<text class="avg-label">平均值: {{ formatValue(uricAcidData.avgValue) }} µmol/L</text>
				</view>

				<view class="bar-charts">
					<view class="bar-chart">
						<text class="chart-title">µmol/L</text>
						<view class="bars">
							<view class="bar-item">
								<view class="bar max-value" :style="{ height: getBarHeight(uricAcidData.maxValue, 600) + 'rpx' }"></view>
								<text class="bar-label">最高值</text>
								<text class="bar-value">{{ formatValue(uricAcidData.maxValue) }}</text>
							</view>
							<view class="bar-item">
								<view class="bar min-value" :style="{ height: getBarHeight(uricAcidData.minValue, 600) + 'rpx' }"></view>
								<text class="bar-label">最低值</text>
								<text class="bar-value">{{ formatValue(uricAcidData.minValue) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 血脂分析 -->
			<view class="health-section">
				<view class="section-header">
					<text class="section-title">血脂</text>
					<text class="view-abnormal" @tap="viewAbnormal('bloodLipid')">查看异常 ></text>
				</view>
				
				<view class="chart-container">
					<view class="donut-chart">
						<view class="chart-center">
							<text class="total-count">{{ bloodLipidData.count }}次</text>
							<text class="total-label">总次数</text>
						</view>
					</view>
					<view class="chart-legend">
						<view class="legend-item">
							<view class="legend-color normal"></view>
							<text class="legend-text">正常: {{ bloodLipidData.normal }}次 </text>
						</view>
						<view class="legend-item">
							<view class="legend-color normal"></view>
							<text class="legend-text">边缘升高: {{ bloodLipidData.high }}次 </text>
						</view>
						<view class="legend-item">
							<view class="legend-color high"></view>
							<text class="legend-text">高血脂: {{ bloodLipidData.high1 }}次 </text>
						</view>
					</view>
				</view>

				<view class="bar-charts">
					<view class="bar-chart">
						<text class="chart-title">时间段平均值mmol/L</text>
						<view class="bars">
							<view class="bar-item">
								<view class="bar total-cholesterol" :style="{ height: getBarHeight(bloodLipidData.avgTcValue, 10) + 'rpx' }"></view>
								<text class="bar-label">总胆固醇</text>
								<text class="bar-value">{{ formatValue(bloodLipidData.avgTcValue) }}</text>
							</view>
							<view class="bar-item">
								<view class="bar triglycerides" :style="{ height: getBarHeight(bloodLipidData.avgTgValue, 10) + 'rpx' }"></view>
								<text class="bar-label">甘油三酯</text>
								<text class="bar-value">{{ formatValue(bloodLipidData.avgTgValue) }}</text>
							</view>
							<view class="bar-item">
								<view class="bar hdl" :style="{ height: getBarHeight(bloodLipidData.timeAverages.hdl, 10) + 'rpx' }"></view>
								<text class="bar-label">高密度脂蛋白</text>
								<text class="bar-value">{{ formatValue(bloodLipidData.avgHdlValue) }}</text>
							</view>
							<view class="bar-item">
								<view class="bar ldl" :style="{ height: getBarHeight(bloodLipidData.timeAverages.ldl, 10) + 'rpx' }"></view>
								<text class="bar-label">低密度脂蛋白</text>
								<text class="bar-value">{{ formatValue(bloodLipidData.avgLdlValue) }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 免责声明 -->
		<view class="disclaimer">
			<text class="disclaimer-text">注: 以上数据仅供参考,不作为治疗及诊断依据;</text>
		</view>
	</view>
</template>

<script>
	import{acidReport,bloodGlucoseReport,bloodPressureReport,fatReport} from'@/api/healthData/everyGlucose.js'
export default {
	data() {
		return {
			userId: this.$store.state.user.userId,
			currentReportType: 'week', // week, month, year
			dateRangeText: '',
			
			// 血糖数据
			bloodSugarData: {
				count: 0,
				normal: 0,
				high: 0,
				avgValue: 0,
				maxValue: 0,
				minValue: 0
			},
			
			// 血压数据
			bloodPressureData: {
				count: 0,
				normal: 0,
				high: 0,
				high1: 0,
				high2: 0,
				high3: 0,
				low: 0,
				avgSystolicValue: 0,
				avgDiastolicValue: 0,
				maxSystolicValue: 0,
				maxDiastolicValue: 0,
				minSystolicValue: 0,
				minDiastolicValue: 0
			},
			
			// 尿酸数据
			uricAcidData: {
				count: 0,
				normal: 0,
				high: 0,
				avgValue: 0,
				maxValue: 0,
				minValue: 0
			},
			
			// 血脂数据
			bloodLipidData: {
				total: 21,
				normal: 16,
				high: 5,
				normalPercent: 75,
				highPercent: 25,
				timeAverages: {
					totalCholesterol: 9.2,
					triglycerides: 8.5,
					hdl: 8.8,
					ldl: 8.5
				}
			}
		}
	},
	
	mounted() {
		// 页面加载时初始化日期范围
		this.updateDateRange()
		this.loadReportData()
	},
	
		methods: {
		// 格式化数值显示：保留一位小数，如果是整数则显示整数
		formatValue(value) {
			if (value === null || value === undefined || isNaN(value)) {
				return '0'
			}
			const num = parseFloat(value)
			// 如果是整数，直接返回整数
			if (num % 1 === 0) {
				return num.toString()
			}
			// 否则保留一位小数
			return num.toFixed(1)
		},
		
		goBack() {
			uni.navigateBack()
		},
		
		switchReportType(type) {
			this.currentReportType = type
			// 根据报告类型更新日期范围和数据
			this.updateDateRange()
			this.loadReportData()
		},
		
		selectDateRange() {
			// 实现日期选择功能
			console.log('选择日期范围')
		},
		
		updateDateRange() {
			const now = new Date()
			let startDate, endDate
			
			switch (this.currentReportType) {
				case 'week':
					// 计算本周的起止日期（周一到周日）
					const dayOfWeek = now.getDay() // 0=周日, 1=周一, ..., 6=周六
					const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek // 如果是周日，向前推6天到周一
					
					startDate = new Date(now)
					startDate.setDate(now.getDate() + mondayOffset)
					
					endDate = new Date(startDate)
					endDate.setDate(startDate.getDate() + 6)
					
					this.dateRangeText = this.formatDateRange(startDate, endDate)
					break
					
				case 'month':
					// 计算本月的起止日期
					startDate = new Date(now.getFullYear(), now.getMonth(), 1)
					endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0) // 下个月的第0天 = 本月的最后一天
					
					this.dateRangeText = this.formatDateRange(startDate, endDate)
					break
					
				case 'year':
					// 计算本年的起止日期
					startDate = new Date(now.getFullYear(), 0, 1) // 1月1日
					endDate = new Date(now.getFullYear(), 11, 31) // 12月31日
					
					this.dateRangeText = this.formatDateRange(startDate, endDate)
					break
			}
		},
		
		formatDateRange(startDate, endDate) {
			// 格式化日期范围显示
			const formatDate = (date) => {
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${month}-${day}`
			}
			
			return `${formatDate(startDate)}至${formatDate(endDate)}`
		},
		
		loadReportData() {
			// 根据报告类型加载数据
			console.log('加载报告数据:', this.currentReportType)
			this.acidReport()
			this.bloodGlucoseReport()
			this.bloodPressureReport()
			this.fatReport()
		},
		
		viewAbnormal(type) {
			// 查看异常数据
			if(type === 'bloodSugar'){
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/more-blood-sugar?filter=abnormal'
				})
			}else if(type === 'bloodPressure'){
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/more-blood-pressure?filter=abnormal'
				})
			}else if(type === 'bloodLipid'){
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/more-blood-lipid?filter=abnormal'
				})
			}else if(type === 'uricAcid'){
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/more-uric-acid?filter=abnormal'
				})
			}else if(type === 'weight'){
				uni.navigateTo({
					url: '/subPackage_1/pages/index/healthData/more-weight?filter=abnormal'
				})
			}
		},
		
		getBarHeight(value, maxValue) {
			// 计算柱状图高度，确保最小高度为20rpx，最大高度为100rpx
			const height = Math.max(20, (value / maxValue) * 100)
			return Math.min(height, 100)
		},
		
		getCurrentDateRange() {
			// 获取当前日期范围的起止日期
			const now = new Date()
			let startDate, endDate
			
			switch (this.currentReportType) {
				case 'week':
					// 计算本周的起止日期
					const dayOfWeek = now.getDay() // 0=周日, 1=周一, ..., 6=周六
					const mondayOffset = dayOfWeek === 0 ? -6 : 1 - dayOfWeek // 如果是周日，向前推6天到周一
					
					startDate = new Date(now)
					startDate.setDate(now.getDate() + mondayOffset)
					
					endDate = new Date(startDate)
					endDate.setDate(startDate.getDate() + 6)
					break
					
				case 'month':
					// 计算本月的起止日期
					startDate = new Date(now.getFullYear(), now.getMonth(), 1)
					endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0) // 下个月的第0天 = 本月的最后一天
					break
					
				case 'year':
					// 计算本年的起止日期
					startDate = new Date(now.getFullYear(), 0, 1) // 1月1日
					endDate = new Date(now.getFullYear(), 11, 31) // 12月31日
					break
			}
			
			// 格式化为 YYYY-MM-DD 格式
			const formatDate = (date) => {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				return `${year}-${month}-${day}`
			}
			
			return {
				startDate: formatDate(startDate),
				endDate: formatDate(endDate)
			}
		},
		
		acidReport(){
			const dateRange = this.getCurrentDateRange()
			acidReport({
				userId: this.userId,
				startDate: dateRange.startDate,
				endDate: dateRange.endDate
			}).then(res=>{
				// 处理返回的数据
				if(res && res.data) {
					console.log('尿酸报告数据:', res)
					// 更新尿酸数据
					this.uricAcidData.normal = res.data.正常 || 0
					this.uricAcidData.high = res.data.高尿酸 || 0
					this.uricAcidData.count = res.data.count || 0
					this.uricAcidData.avgValue = res.data.avgValue || 0
					this.uricAcidData.maxValue = res.data.maxValue || 0
					this.uricAcidData.minValue = res.data.minValue || 0
				}
			}).catch(err => {
				console.error('获取尿酸报告失败:', err)
			})
		},
		bloodPressureReport(){
			const dateRange = this.getCurrentDateRange()
			bloodPressureReport({
				userId: this.userId,
				startDate: dateRange.startDate,
				endDate: dateRange.endDate
			}).then(res=>{
				console.log('血压报告数据:', res)
				this.bloodPressureData.normal = res.data.正常 || 0
				this.bloodPressureData.low = res.data.低血压 || 0
				this.bloodPressureData.high = res.data.高血压前期 || 0
				this.bloodPressureData.high1 = res.data.一级高血压 || 0
				this.bloodPressureData.high2 = res.data.二级高血压 || 0
				this.bloodPressureData.high3 = res.data.三级高血压 || 0
				this.bloodPressureData.count = res.data.count || 0
				this.bloodPressureData.avgSystolicValue=res.data.avgSystolicValue || 0
				this.bloodPressureData.avgDiastolicValue=res.data.avgDiastolicValue || 0
				this.bloodPressureData.maxSystolicValue=res.data.maxSystolicValue || 0
				this.bloodPressureData.maxDiastolicValue=res.data.maxDiastolicValue || 0
				this.bloodPressureData.minSystolicValue=res.data.minSystolicValue || 0
				this.bloodPressureData.minDiastolicValue=res.data.minDiastolicValue || 0
			})
		},
		bloodGlucoseReport(){
			const dateRange = this.getCurrentDateRange()
			bloodGlucoseReport({
				userId: this.userId,
				startDate: dateRange.startDate,
				endDate: dateRange.endDate
			}).then(res=>{
				console.log('血糖报告数据:', res)
				this.bloodSugarData.normal = res.data.正常 || 0
				this.bloodSugarData.high = res.data.高血糖 || 0
				this.bloodSugarData.low = res.data.低血糖 || 0
				this.bloodSugarData.count = res.data.count || 0
				this.bloodSugarData.avgValue = res.data.avgValue || 0
				this.bloodSugarData.maxValue = res.data.maxValue || 0
				this.bloodSugarData.minValue = res.data.minValue || 0
				if(res.data.偏高){
					this.bloodSugarData.high = Number(res.data.偏高)+Number(res.data.高血糖) || 0
				}
			})
		},
		fatReport(){
			const dateRange = this.getCurrentDateRange()
			fatReport({
				userId: this.userId,
				startDate: dateRange.startDate,
				endDate: dateRange.endDate
			}).then(res=>{
				console.log('脂肪报告数据:', res)
				this.bloodLipidData.normal = res.data.正常 || 0
				this.bloodLipidData.high = res.data.边缘升高 || 0
				this.bloodLipidData.high1 = res.data.高血脂 || 0
				this.bloodLipidData.count = res.data.count || 0
				this.bloodLipidData.avgTcValue = res.data.avgTcValue || 0
				this.bloodLipidData.avgTgValue = res.data.avgTgValue || 0
				this.bloodLipidData.avgHdlValue = res.data.avgHdlValue || 0
				this.bloodLipidData.avgLdlValue = res.data.avgLdlValue || 0
			})
		}

	},
	
	onLoad() {
		this.updateDateRange()
	}
}
</script>

<style scoped>
.health-report {
	background: #fff;
	min-height: 100vh;
}

/* 导航栏 */
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
}

.nav-left, .nav-right {
	width: 60rpx;
	text-align: center;
}

.back-icon, .more-icon {
	font-size: 40rpx;
	color: #333;
}

.nav-title {
	font-size: 36rpx;
	font-weight: 500;
	color: #333;
}

/* 报告选择器 */
.report-selector {
	background: #fff;
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.selector-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.selector-tabs {
	display: flex;
	background: #f8f9fa;
	border-radius: 12rpx;
	padding: 6rpx;
	gap: 4rpx;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 16rpx 24rpx;
	border-radius: 8rpx;
	position: relative;
	transition: all 0.3s ease;
}

.tab-item.active {
	background: #fff;
	box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.15);
}

.tab-text {
	font-size: 28rpx;
	color: #666;
	font-weight: 400;
	transition: all 0.3s ease;
}

.tab-item.active .tab-text {
	color: #4CAF50;
	font-weight: 500;
}

.date-range {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 12rpx 16rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
	border: 1rpx solid #e9ecef;
}

.date-text {
	font-size: 26rpx;
	color: #495057;
	font-weight: 400;
}

.arrow-down {
	font-size: 18rpx;
	color: #6c757d;
	transition: transform 0.3s ease;
}

.date-range:active .arrow-down {
	transform: rotate(180deg);
}

/* 数据分析 */
.data-analysis {
	padding: 40rpx 30rpx 0;
	background: #fafbfc;
}

.analysis-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1a1a;
	margin-bottom: 40rpx;
	display: block;
	letter-spacing: 0.5rpx;
}

/* 健康数据区块 */
.health-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	border: 1rpx solid #f0f0f0;
}

.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.section-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #1a1a1a;
	letter-spacing: 0.3rpx;
}

.view-abnormal {
	font-size: 26rpx;
	color: #4CAF50;
	font-weight: 500;
	padding: 8rpx 12rpx;
	border-radius: 6rpx;
	background: rgba(76, 175, 80, 0.08);
	transition: all 0.3s ease;
}

.view-abnormal:active {
	background: rgba(76, 175, 80, 0.15);
	transform: scale(0.95);
}

/* 图表容器 */
.chart-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32rpx;
	margin-bottom: 32rpx;
	padding: 24rpx;
	background: #fafbfc;
	border-radius: 12rpx;
	border: 1rpx solid #f0f0f0;
}

.donut-chart {
	width: 240rpx;
	height: 240rpx;
	border-radius: 50%;
	background: conic-gradient(
		#4CAF50 0deg 90deg,
		#FF5722 90deg 324deg,
		#FF9800 324deg 360deg
	);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.donut-chart::before {
	content: '';
	position: absolute;
	width: 140rpx;
	height: 140rpx;
	background: #fff;
	border-radius: 50%;
}

.chart-center {
	text-align: center;
	z-index: 1;
}

.total-count {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	display: block;
}

.total-label {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-top: 5rpx;
}

.chart-legend {
	flex: 1;
	text-align: right;
}

.legend-item {
	display: flex;
	align-items: center;
	gap: 15rpx;
	margin-bottom: 15rpx;
}

.legend-color {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
}

.legend-color.normal {
	background: #4CAF50;
}

.legend-color.high {
	background: #FF5722;
}

.legend-color.high1 {
	background: #FF9800;
}

.legend-color.high2 {
	background: #FF6B35;
}

.legend-color.high3 {
	background: #D32F2F;
}

.legend-color.low {
	background: #2196F3;
}

.legend-color.purple {
	background: #9C27B0;
}

.legend-text {
	font-size: 26rpx;
	color: #333;
}

/* 平均值 */
.average-value {
	margin-bottom: 32rpx;
	padding: 20rpx 24rpx;
	background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(76, 175, 80, 0.12) 100%);
	border-radius: 12rpx;
	border: 1rpx solid rgba(76, 175, 80, 0.2);
}

.avg-label {
	font-size: 28rpx;
	color: #2e7d32;
	font-weight: 500;
	text-align: center;
}

/* 柱状图 */
.bar-charts {
	display: flex;
	gap: 24rpx;
	padding: 24rpx;
	background: #fafbfc;
	border-radius: 12rpx;
	border: 1rpx solid #f0f0f0;
}

.bar-chart {
	flex: 1;
}

.chart-title {
	font-size: 26rpx;
	color: #495057;
	margin-bottom: 24rpx;
	display: block;
	font-weight: 500;
	text-align: center;
}

.bars {
	display: flex;
	align-items: flex-end;
	gap: 20rpx;
	height: 120rpx;
	position: relative;
}

.bars::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1rpx;
	background: #e0e0e0;
	z-index: 0;
}

.bar-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	flex: 1;
	height: 100%;
	position: relative;
	z-index: 1;
}

.bar {
	width: 26px;
	border-radius: 4rpx 4rpx 0 0;
	margin-bottom: 10rpx;
	min-height: 20rpx;
	position: relative;
}

.bar.max-value {
	background: #2196F3;
}

.bar.min-value {
	background: #4CAF50;
}

.bar.fasting {
	background: #FF5722;
}

.bar.before-meal {
	background: #4CAF50;
}

.bar.after-meal {
	background: #FF9800;
}

.bar.before-sleep {
	background: #4CAF50;
}

.bar.total-cholesterol {
	background: #FF5722;
}

.bar.triglycerides {
	background: #4CAF50;
}

.bar.hdl {
	background: #4CAF50;
}

.bar.ldl {
	background: #FF5722;
}

.bar-label {
	font-size: 22rpx;
	color: #666;
	margin-bottom: 5rpx;
	text-align: center;
	white-space: nowrap;
}

.bar-value {
	font-size: 24rpx;
	color: #333;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
}

/* 免责声明 */
.disclaimer {
	padding: 40rpx 30rpx;
	text-align: center;
	background: #fafbfc;
	border-top: 1rpx solid #f0f0f0;
}

.disclaimer-text {
	font-size: 24rpx;
	color: #6c757d;
	line-height: 1.6;
	letter-spacing: 0.3rpx;
}
</style>
